<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 消费统计 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-select v-model="query.type" placeholder="--消费类型--" clearable filterable>
                                <el-option
                                    v-for="item in typeoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.billNumber"
                                placeholder="订单号查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker
                                type="date"
                                placeholder="下单时间"
                                v-model="query.beginTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </div>
                    </el-col>
                    <el-col style="padding: 0px; display: inline; width: 1%; line-height: 1.5">—</el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker type="date" placeholder="下单时间" v-model="query.endTime" style="width: 100%"></el-date-picker>
                        </div>
                    </el-col>

                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-tabs type="border-card">
                <el-tab-pane label="会员消费统计">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        row-key="id"
                    >
                        @selection-change="handleSelectionChange" >
                        <el-table-column width="180" prop="CreationTime" label="消费时间"></el-table-column>
                        <el-table-column width="180" prop="BillNumber" label="订单号"></el-table-column>
                        <el-table-column prop="Type" :formatter="typeFilter" label="消费类型" align="center"></el-table-column>
                        <el-table-column prop="TotalPaid" label="消费金额" align="center"></el-table-column>
                        <el-table-column width="200" prop="Name" label="消费门店" align="center"></el-table-column>
                        <el-table-column prop="WechatPay" label="微信支付" align="center"></el-table-column>
                        <el-table-column prop="AliPay" label="支付宝支付" align="center"></el-table-column>
                        <el-table-column prop="BalancePay" label="余额支付" align="center"></el-table-column>
                        <el-table-column prop="IntegralPay" label="积分支付" align="center"></el-table-column>
                        <el-table-column prop="CouponPay" label="代金券支付" align="center"></el-table-column>
                        <el-table-column prop="CashPay" label="现金支付"></el-table-column>
                        <el-table-column prop="CardID" label="卡号"></el-table-column>
                        <el-table-column prop="WeChatName" label="微信名称"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 15, 20, 30]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageTotal"
                        >
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="图表统计分析">
                    <Chart ref="charts" :id="id" :option="option"></Chart>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import Chart from '@/components/common/chart.vue';
export default {
    // name: 'user_list',
    data() {
        return {
            typeoptions: [
                {
                    value: -1,
                    label: '--消费类型--'
                },
                {
                    value: 0,
                    label: '商品订单'
                },
                {
                    value: 1,
                    label: '拼团订单'
                },
                {
                    value: 2,
                    label: '限时抢购'
                },
                {
                    value: 3,
                    label: '礼品兑换'
                },
                {
                    value: 4,
                    label: '快速消费'
                },
                {
                    value: 5,
                    label: '商品消费'
                },
                {
                    value: 6,
                    label: '会员充值'
                },
                {
                    value: 7,
                    label: '积分充值'
                }
            ],

            query: {
                billNumber: '',
                type: -1,
                beginTime: '',
                endTime: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            loading: false,
            pageTotal: 0,
            //----------------图表--------------------
            id: 'consume',
            option: {
                chart: {
                    type: 'column'
                },
                plotOptions: {
                    column: { pointWidth: 40 }
                },
                title: {
                    text: '会员消费统计'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: 0, // 设置轴标签旋转角度
                        style: { color: 'black', fontSize: '14px' }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '总计 (元)'
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false // 禁用版权信息
                },
                series: [
                    {
                        name: '总计',
                        color: '#23c6c8',
                        data: [
                            // ['商品订单', 24633.7],
                            // ['拼团订单', 11190.2],
                            // ['限时抢购', 28520.4],
                            // ['礼品兑换', 50233.7],
                            // ['快速消费', 49132.4],
                            // ['商品消费', 19506],
                            // ['会员充值', 13030.1],
                            // ['积分充值', 33662.9]
                        ],
                        dataLabels: {
                            enabled: true,
                            rotation: 0,
                            color: 'white',
                            align: 'right',
                            y: 10
                        }
                    }
                ]
            }
        };
    },
    components: {
        Chart
    },
    created() {
        this.getData();
        this.getTotalData();
    },
    methods: {
        // 触发搜索按钮
        handleSearch() {
            this.query.pageIndex = 1;
            this.getData();
            this.getTotalData();
        },
        typeFilter(row, column, cellValue, index) {
            var array = this.typeoptions;
            return array.filter((item) => {
                return item.value == row.Type;
            })[0].label;
        },
        getSelect() {
            axios({
                url: config.gatewayUrl + '/member/MemberLevel/GetMemberLevelSelect',
                method: 'post',
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.selectMenberLevel = res.data;
            });
        },
        getData() {
            this.loading = true;
            var parmas = {
                type: this.query.type || -1,
                orderNumber: this.query.billNumber,
                beginTime: this.query.beginTime,
                endTime: this.query.endTime,
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };
            axios({
                url: config.gatewayUrl + '/statistics/memberConsume/getPage',
                method: 'post',
                data: parmas,
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.pageTotal = res.data.total;
                this.tableData = JSON.parse(res.data.list);
                this.loading = false;
            });
        },
        getTotalData() {
            this.loading = true;
            var parmas = {
                type: this.query.type || -1,
                orderNumber: this.query.billNumber,
                beginTime: this.query.beginTime,
                endTime: this.query.endTime,
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };
            axios({
                url: config.gatewayUrl + '/statistics/memberConsume/getchartdata',
                method: 'post',
                data: parmas,
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                if (String(res.data).length > 0) {
                    var arr = [];
                    var array = String(res.data).split(',');

                    for (let j = 0; j < array.length; j = j + 2) {
                        if (array[j] != '') {
                            var itemArrat = [];
                            itemArrat[0] = array[j];
                            if (j + 1 < array.length) itemArrat[1] = parseFloat(array[j + 1]);

                            arr.push(itemArrat);
                        }
                    }
                     this.option.series[0].data = arr;
                    // HighCharts.chart(this.id, this.option)
                     this.$refs.charts.SetChart();
                }
                console.log(this.option.series[0].data);
                //this.option.series[0].data=arr;
                // ar.push(JSON.parse(res.data));
                // this.option.series[0].data=ar;
                //    ['商品订单', 24633.7],
                //         ['拼团订单', 11190.2],
                //         ['限时抢购', 28520.4],
                //         ['礼品兑换', 50233.7],
                //         ['快速消费', 49132.4],
                //         ['商品消费', 19506],
                //         ['会员充值', 13030.1],
                //         ['积分充值', 33662.9]
                //this.chartData = JSON.parse(res.data.list);
            });
        },
        //消费记录分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    },
    watch: {}
};
</script>